<template>
  <div class="merchant-container">
    <a-card class="search-card">
      <a-form :model="searchForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" layout="inline">
        <a-form-item label="商户名称">
          <a-input v-model:value="searchForm.name" placeholder="请输入商户名称" />
        </a-form-item>
        <a-form-item label="商户状态">
          <a-select v-model:value="searchForm.status" placeholder="请选择状态" style="width: 120px" allow-clear>
            <a-select-option value="1">正常</a-select-option>
            <a-select-option value="0">冻结</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch">
            <template #icon>
              <SearchOutlined />
            </template>
            搜索
          </a-button>
          <a-button @click="handleReset" class="smart-margin-left10">
            <template #icon>
              <ReloadOutlined />
            </template>
            重置
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <a-card class="table-card">
      <template #title>
        <span>商户列表</span>
      </template>
      <template #extra>
        <a-button type="primary" @click="handleAdd">
          <template #icon>
            <PlusOutlined />
          </template>
          新增商户
        </a-button>
      </template>
      <a-table :data-source="merchantList" :columns="columns" :pagination="false" bordered>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag :color="record.status === '1' ? 'success' : 'error'">
              {{ record.status === '1' ? '正常' : '冻结' }}
            </a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <div class="smart-table-operate">
              <a-button type="link" @click="handleEdit(record)">编辑</a-button>
              <a-button type="link" danger @click="handleDelete(record)">删除</a-button>
              <a-button type="link" @click="handleView(record)">详情</a-button>
            </div>
          </template>
        </template>
      </a-table>
      <div class="pagination-container">
        <a-pagination
          show-size-changer
          show-quick-jumper
          :current="pageInfo.currentPage"
          :page-size-options="['10', '20', '50', '100']"
          :page-size="pageInfo.pageSize"
          v-model:pageSize="pageInfo.pageSize"
          :total="pageInfo.total"
          @show-size-change="handleSizeChange"
          @change="handleCurrentChange"
          :show-total="(total) => `共 ${total} 条`"
        />
      </div>
    </a-card>

    <!-- 商户详情对话框 -->
    <a-modal :title="dialogTitle" v-model:open="dialogVisible" :width="600" @ok="submitForm">
      <a-form :model="merchantForm" :rules="merchantRules" ref="merchantFormRef" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="商户名称" name="name">
          <a-input v-model:value="merchantForm.name" placeholder="请输入商户名称" />
        </a-form-item>
        <a-form-item label="联系人" name="contact">
          <a-input v-model:value="merchantForm.contact" placeholder="请输入联系人" />
        </a-form-item>
        <a-form-item label="联系电话" name="phone">
          <a-input v-model:value="merchantForm.phone" placeholder="请输入联系电话" />
        </a-form-item>
        <a-form-item label="地址" name="address">
          <a-input v-model:value="merchantForm.address" placeholder="请输入地址" />
        </a-form-item>
        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="merchantForm.status">
            <a-radio value="1">正常</a-radio>
            <a-radio value="0">冻结</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { message, Modal } from 'ant-design-vue';
import { SearchOutlined, ReloadOutlined, PlusOutlined } from '@ant-design/icons-vue';

export default {
  name: 'MerchantManagement',
  components: {
    SearchOutlined,
    ReloadOutlined,
    PlusOutlined
  },
  data() {
    return {
      searchForm: {
        name: '',
        status: undefined
      },
      merchantList: [
        { id: 'M1001', name: '北京科技有限公司', contact: '张三', phone: '13800138001', address: '北京市朝阳区xxx街道', status: '1', createTime: '2023-01-15 10:30:00' },
        { id: 'M1002', name: '上海信息技术有限公司', contact: '李四', phone: '13800138002', address: '上海市浦东新区xxx路', status: '1', createTime: '2023-02-20 14:45:00' },
        { id: 'M1003', name: '广州电子商务有限公司', contact: '王五', phone: '13800138003', address: '广州市天河区xxx广场', status: '0', createTime: '2023-03-10 09:15:00' },
        { id: 'M1004', name: '深圳创新科技有限公司', contact: '赵六', phone: '13800138004', address: '深圳市南山区xxx科技园', status: '1', createTime: '2023-04-05 16:20:00' }
      ],
      columns: [
        {
          title: '商户ID',
          dataIndex: 'id',
          key: 'id',
          width: 100
        },
        {
          title: '商户名称',
          dataIndex: 'name',
          key: 'name',
          width: 180
        },
        {
          title: '联系人',
          dataIndex: 'contact',
          key: 'contact',
          width: 120
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
          key: 'phone',
          width: 150
        },
        {
          title: '地址',
          dataIndex: 'address',
          key: 'address'
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          width: 100
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          width: 180
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 200,
          fixed: 'right'
        }
      ],
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        total: 4
      },
      dialogVisible: false,
      dialogTitle: '',
      merchantForm: {
        id: '',
        name: '',
        contact: '',
        phone: '',
        address: '',
        status: '1'
      },
      merchantRules: {
        name: [
          { required: true, message: '请输入商户名称', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ]
      },
      merchantFormRef: null
    }
  },
  methods: {
    handleSearch() {
      message.info('执行搜索操作');
    },
    handleReset() {
      this.searchForm = {
        name: '',
        status: undefined
      };
      message.info('重置搜索条件');
    },
    handleAdd() {
      this.dialogTitle = '新增商户';
      this.merchantForm = {
        id: '',
        name: '',
        contact: '',
        phone: '',
        address: '',
        status: '1'
      };
      this.dialogVisible = true;
    },
    handleEdit(record) {
      this.dialogTitle = '编辑商户';
      this.merchantForm = { ...record };
      this.dialogVisible = true;
    },
    handleDelete(record) {
      Modal.confirm({
        title: '提示',
        content: `确定要删除商户"${record.name}"吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          message.success('删除成功');
        },
        onCancel: () => {
          message.info('已取消删除');
        }
      });
    },
    handleView(record) {
      message.info(`查看商户${record.name}的详细信息`);
    },
    handleSizeChange(current, pageSize) {
      this.pageInfo.pageSize = pageSize;
      message.info(`每页显示${pageSize}条`);
    },
    handleCurrentChange(page, pageSize) {
      this.pageInfo.currentPage = page;
      message.info(`当前页: ${page}`);
    },
    submitForm() {
      this.$refs.merchantFormRef.validate().then(() => {
        message.success('保存成功');
        this.dialogVisible = false;
      }).catch(() => {
        // 验证失败
      });
    }
  }
}
</script>

<style scoped>
.merchant-container {
  padding: 20px;
}

.search-card,
.table-card {
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>